<template>
  <div class="regional-hotspot content-view">
    <a-row class="regional-hotspot-box">
      <a-col class="left-content">
        <a-affix :offset-top="80"> 
          <div class="map-content">
            <sectionTitle titleName="热点地域分布" des="(点击地图可查看各地域详细数据)" />
            <div class="map-content">
              <mapEcharts id="echart12" @mapClick="mapClick"></mapEcharts>
              <div class="map-bottom">
                <img src="../../../assets/images/map.png" alt="">
              </div>
            </div>
          </div>
        </a-affix>
      </a-col>
      <a-col class="right-content">
        <div class="hot-word">
          <sectionTitle :titleName="titleName+'热点词云'" des="(近一周)">
            <slot>
              <img src="../../../assets/images/title/word-ico.png" alt />
            </slot>
          </sectionTitle>
          <div class="erchart-word">
            <wordcloud id="hot-word" :data="hotWordData" height="200px" />
          </div>
        </div>
        <div class="word-analysis">
          <div class="tab-content">
            <a-radio-group v-model="selectValue" button-style="solid">
              <a-radio-button value="blend">
                热词融合
              </a-radio-button>
              <a-radio-button value="analysis">
                热词分析
              </a-radio-button>
            </a-radio-group>
          </div>
          <div class="hotspot-blend" v-if="selectValue === 'blend'">
            <a-tabs v-model="blendTabValue" :animated="false">
              <a-tab-pane key="1" tab="本日">
                <div>
                  <newList :newsList="newsList" :newType="2"></newList>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" tab="近一周">
                Content of Tab Pane 2
              </a-tab-pane>
              <a-tab-pane key="3" tab="近一月">
                Content of Tab Pane 3
              </a-tab-pane>
          </a-tabs>
          </div>
          <div v-else class="hotspot-analysis">
            <a-tabs v-model="analysisTabValue">
              <a-tab-pane key="1" tab="本日">
                <hotWord id="hotword" :height="heightString" :data="wordData"></hotWord>
              </a-tab-pane>
              <a-tab-pane key="2" tab="近一周">
                Content of Tab Pane 2
              </a-tab-pane>
              <a-tab-pane key="3" tab="近一月">
                Content of Tab Pane 3
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import sectionTitle from "components/base/sectionTitle";
import mapEcharts from "components/configuration/regionalHotspot/mapEcharts";
import hotWord from "components/configuration/regionalHotspot/hotWord";
import wordcloud from "components/configuration/newsDetail/wordcloud";
import newList from "components/base/newList";
export default {
  components: {
    sectionTitle,
    mapEcharts,
    hotWord,
    wordcloud,
    newList
  },
  data() {
    return {
      titleName:'全国',
      hotWordData: [
        {
          name: "十九大精神",
          value: 15000,
        },
        {
          name: "两学一做",
          value: 10081,
        },
        {
          name: "中华民族",
          value: 9386,
        },
        {
          name: "马克思主义",
          value: 7500,
        },
        {
          name: "民族复兴",
          value: 7500,
        },
        {
          name: "社会主义制度",
          value: 6500,
        },
        {
          name: "国防白皮书",
          value: 6500,
        },
        {
          name: "创新",
          value: 6000,
        },
        {
          name: "民主革命",
          value: 4500,
        },
        {
          name: "文化强国",
          value: 3800,
        },
        {
          name: "国家主权",
          value: 3000,
        },
        {
          name: "武装颠覆",
          value: 2500,
        },
        {
          name: "领土完整",
          value: 2300,
        },
        {
          name: "安全",
          value: 2000,
        },
        {
          name: "从严治党",
          value: 1900,
        },
        {
          name: "现代化经济体系",
          value: 1800,
        },
        {
          name: "国防动员",
          value: 1700,
        },
        {
          name: "信息化战争",
          value: 1600,
        },
        {
          name: "局部战争",
          value: 1500,
        },
        {
          name: "教育",
          value: 1200,
        },
        {
          name: "职业教育",
          value: 1100,
        },
        {
          name: "兵法",
          value: 900,
        },
        {
          name: "一国两制",
          value: 800,
        },
        {
          name: "特色社会主义思想",
          value: 700,
        },
      ],
      wordData:[
         {
          name: "十九大精神",
          value: 150,
        },
        {
          name: "两学一做",
          value: 100,
        },
        {
          name: "马克思主义",
          value: 750,
        },
        {
          name: "民族复兴",
          value: 750,
        },
        {
          name: "社会主义制度",
          value: 650,
        },
        {
          name: "国防白皮书",
          value: 650,
        },
        {
          name: "创新",
          value: 600,
        },
        {
          name: "民主革命",
          value: 450,
        },
        {
          name: "文化强国",
          value: 380,
        },
        {
          name: "国家主权",
          value: 300,
        }
      ],
      selectValue:'blend',
      blendTabValue:'1',
      analysisTabValue:'1',
      newsList: [
        {
          id: 1,
          isclick: true,
          title:
            "德国孔院举办中医抗新冠疫情线上研讨会|疫情|新冠肺炎德国孔院举办中医抗新冠疫情",
          pubdate:"2020-07-30 08:10:56",
          sitename:"新华网",
          source:"中国共产党新闻网",
          imgs:
            "https://p9.pstatp.com/list/190x124/pgc-image/d6edc92abc3a4a68a91a8427af94c0a1",
          content:
            "1小时前 - 新华社柏林5月11日电(记者张毅荣)德国施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫医院汉萨美安中医中心,共同组织举办了数场中医抗击新。施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫施特拉尔松",
        },
        {
          id: 2,
           title:
            "德国孔院举办中医抗新冠疫情线上研讨会|疫情|新冠肺炎德国孔院举办中医抗新冠疫情",
          pubdate:"2020-07-30 08:10:56",
          sitename:"新华网",
          source:"中国共产党新闻网",
          imgs:
            "https://p9.pstatp.com/list/190x124/pgc-image/d6edc92abc3a4a68a91a8427af94c0a1",
          content:
            "1小时前 - 新华社柏林5月11日电(记者张毅荣)德国施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫医院汉萨美安中医中心,共同组织举办了数场中医抗击新。施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫施特拉尔松",
        },
        {
          id: 3,
          title:
            "德国孔院举办中医抗新冠疫情线上研讨会|疫情|新冠肺炎德国孔院举办中医抗新冠疫情",
          pubdate:"2020-07-30 08:10:56",
          sitename:"新华网",
          source:"中国共产党新闻网",
          imgs:
            "https://p9.pstatp.com/list/190x124/pgc-image/d6edc92abc3a4a68a91a8427af94c0a1",
          content:
            "1小时前 - 新华社柏林5月11日电(记者张毅荣)德国施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫医院汉萨美安中医中心,共同组织举办了数场中医抗击新。施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫施特拉尔松",
        }
      ],
    }
  },
  computed: {
    heightString() {
      return (this.wordData.length*60)+'px'
    }
  },
  methods: {
    mapClick(val){
      if(val === ''){
        this.titleName = "全国"
      } else {
        this.titleName = val
      }
    }
  },
  mounted() {
  },
};
</script>

<style lang="stylus" scoped>
.regional-hotspot {
  height: 100%;

  .regional-hotspot-box {
    display: flex;
    height: 100%;
  }

  .left-content {
    width: 600px;
    box-sizing: border-box;
    height: 100%;
    .map-content {
      height:90%;
    }
    .map-bottom {
      text-align:center;
    }
  }

  .right-content {
    width: 610px;
    box-sizing: border-box;
    height: 100%;
    .hot-word {
      padding: 0px 10px 10px 15px;
      box-sizing: border-box;
      background-color:#fff;
      height:290px;
    }
    .word-analysis {
      padding:15px 25px 10px 15px;
      background:#fff;
      // height:calc(100% - 305px);
      margin-top:15px;
      box-sizing: border-box;
      overflow-y:hidden;
      .tab-content {
        border-bottom:1px solid #089dff;
        margin-bottom:10px;
      }
      .hotspot-blend { 
        // height: calc(100% - 48px);
        min-height:300px;
      }
    }
  }
}
</style>